<template>
    <div class="label-box">
        <span>标签</span>
        <el-select v-model="value" multiple filterable clearable collapse-tags placeholder="请选择" @change="change" size="small">
            <el-option v-for="item in data" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
        </el-select>
    </div>
</template>

<script>
import { getAll } from '@/api/user/label';
export default {
    name: "x-label",
    data() {
        return {
            value: [],
            data: []
        };
    },
    mounted() {
        this.getAllLabel();
    },
    methods: {
        getAllLabel() {
            getAll().then(res => {
                this.data = res.data
            })
        },
        change() {
            this.$emit('childEvent', this.value.join(','))
        }
    }
}
</script>

<style scoped lang="less">
.label-box {
    display: inline;

    span {
        font-size: 14px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
        color: #606266;
    }

    margin-right: 15px;
}
</style>